<template>
  <a-button shape="round" style="margin-right: 5px" @click="remove" icon="delete">
    删除
  </a-button>
</template>
<script>
import {createProps} from '@/utils';

export default {
  name: 'DeleteButton',
  props: {
    config: createProps(Object, () => undefined),
    context: createProps(Object, () => undefined),
    dataSource: createProps(Array, () => []),
    subFormDefinition: createProps(Object),
    selectedRowId: createProps(String),
  },
  methods: {
    removeRelatinData({id}) {
      let formModel = this.context.formModel;
      let relation = formModel._relation || [];
      let index = relation.findIndex(item => item.sourceSubFormDataId === id);
      if (index !== -1) {
        relation.splice(index, 1);
      }
    },
    remove() {
      let index = this.dataSource.findIndex(item => item.id === this.selectedRowId);
      if (index === -1) {
        this.$message.warning('请选择一行删除');
        return;
      }
      this.$confirm({
        okText: '确定',
        cancelText: '取消',
        title: '确定删除吗?',
        content: '删除后不可恢复, 确定删除吗?',
        onOk: () => {
          this.removeRelatinData(this.dataSource[index]);
          this.dataSource.splice(index, 1);
          this.$nextTick(() => {
            this.$emit('updateSubFormData');
          })
        }
      });
    },
  }
};
</script>